<template>
  <div>
      <basic-container>
          <div class="boxsty zhiBiao">
              <div>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="导入"
                    placement="top"
                >
                    <el-upload class="upload-demo"  :show-file-list="false"
                    accept=".xlsx, .xls" :headers="headers" action="/admin/sys-file/upload" style="float:left;margin-right:10px;" :on-success="handleUploadSuccess">
                    <el-button  icon="el-icon-upload" type="success" circle></el-button>
                    </el-upload>

                </el-tooltip>
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="导出"
                    placement="bottom"
                >
                    <el-button type="warning" icon="el-icon-download" @click="excelExportHandleDown('领导副职配置')" circle></el-button>
                </el-tooltip>
              </div>
              <el-table :data="dataList" border v-loading="dataListLoading" @row-dblclick="rowDblclick" stripe ref="table"  width="100%"
                class="avue-crud" min-height="450px" style="margin-top:20px;"header-align="center">
                <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column prop="" label="序号" width="60" :formatter="nShowIndex"align="center"></el-table-column>
                <el-table-column prop="ryCode" label="人员编号" width="100"align="center">
                </el-table-column>
                <el-table-column prop="ryXm" label="姓名" width="80"align="center">
                </el-table-column>
                <el-table-column prop="llKssj" :formatter="formater" label="开始日期" min-width="100"align="center">
                </el-table-column>
                <el-table-column prop="llJssj" :formatter="formater" label="结束日期" min-width="100"align="center">
                </el-table-column>
                <el-table-column prop="ryGzdw" label="工作单位" show-overflow-tooltip min-width="100"align="center">
                </el-table-column>
                <el-table-column  prop="ryXzjb" label="级别判断" width="100"align="center">
                </el-table-column>
                <el-table-column  prop="zhyjfz" label="综合业绩分值（副职）" min-width="150"align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.id==dbclickRowId">
                            <el-input-number placeholder="" v-model="scope.row.zhyjfz" @blur="changeZh(scope.row)" style="width:100%;"></el-input-number>
                        </div>
                        <span v-else>{{scope.row.zhyjfz}}</span>
                    </template>
                </el-table-column>
              </el-table>
              <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                         :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                         layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
          </div>
      </basic-container>
  </div>
</template>

<script>
import store from '@/store'
import request from '@/router/axios'
import {
    fetchList,
   putObj
  } from '@/api/jiangjin/jiangjinryllb'
export default {
    data(){
        return{
            headers: {
            Authorization: 'Bearer ' + store.getters.access_token
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dbclickRowId:""
        }
    },
    created(){
        this.getDataList()
    },
    methods:{
        formater(row, column, cellValue, index){
         if(cellValue){
        return this.$moment(cellValue).format("yyyy-MM-DD");
      }else {
        return cellValue;
      }
      },
        // 获取数据列表
      getDataList() {
        this.dataListLoading = true

            fetchList(Object.assign({
            current: this.pageIndex,
            size: this.pageSize
            })).then(response => {
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
            this.dbclickRowId=""
            this.dataListLoading = false
            }).catch(err =>{
            this.dbclickRowId=""
            this.dataListLoading = false
            })

        },
        changeZh(row){
            putObj(row).then(res=>{
                if(res.data.code==0){
                    this.$message.closeAll()
                    this.$message.success("保存成功!")
                    this.getDataList()
                }
            })
        },
        nShowIndex(row, column, cellValue, index) {
        return index + 1 + this.pageSize*(this.pageIndex-1);
      },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
        handleUploadSuccess(response, file, fileList) {
            this.$message.closeAll()
            if (response.code == 0) {
            request({
                url: '/jiangjin/jiangjinryllb/importryllbByzhyjfz/' + response.data.bucketName + '/' + response.data.fileName ,
                method: 'get',
            }).then((response) => { //
                var obj = response;
                //this.loading.close()
                 this.getDataList()
            }).catch(() => {
                //this.loading.close();
               

            });

            } else {
           // this.loading.close();
            this.$message.error("数据导入错误请联系管理员")
            this.$message.error('上传出错：' + response.msg)
            }
        },
        excelExportHandleDown(filename){
            return request({
                url: '/jiangjin/jiangjinryllb/exportByZhyjfz',
                method: 'post',
                responseType: 'arraybuffer'
                }).then((response) => { // 处理返回的文件流
                const blob = new Blob([response.data], {
                    type: 'application/vnd.ms-excel'
                })
                const link = document.createElement('a')
                link.href = URL.createObjectURL(blob)
                link.download = filename
                document.body.appendChild(link)
                link.click()
                window.setTimeout(function () {
                    URL.revokeObjectURL(blob)
                    document.body.removeChild(link)
                }, 0)
            })
        },
        rowDblclick(row){
            this.dbclickRowId=row.id
        },
    }
}
</script>

<style>

</style>